
<template>
    <div class="content">
      <div class="sticky-nav-bar">
        <van-nav-bar
            title="课程列表"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"/>
      </div>
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="已经到底部了"
          @load="onLoad">
        <!-- van-cell必须将position修改一下，默认是relative ，会导致覆盖顶部的nav-bar -->
        <van-cell style="position: static" v-for="(item,index) in list" :key="index" :title="item.className" @click="gotoCssTest(item.index,item.className)"/>
      </van-list>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          loading: false,
          finished: false,
          list: [],
          index: 0
        }
      },
      mounted() {
        this.getData()
      },
      methods: {
        onClickLeft(){
          this.$router.push({
            path: '/',
          })
        },
        gotoCssTest(index,className){
          if(index>=6){
            this.$router.push({path:"/classA",query:{ index: index,className: className }})
          }else{
            this.$router.push({path:"/cssTest",query:{ index: index,className: className }})
          }
        },
        onLoad(){
          this.loading = true
          setTimeout(()=>{
            this.getData()
          },1000)
        },
        getData(){
          for (let i=0;i<20;i++){
            let className=""
            if(this.index===0){
              className="第"+(this.index+1)+"课：页面元素演示"
            }else if(this.index===1){
              className="第"+(this.index+1)+"课：flex布局演示"
            }else if(this.index===2){
              className="第"+(this.index+1)+"课：传统布局演示"
            }else if(this.index===3){
              className="第"+(this.index+1)+"课：上中下结构，上下固定，中间可滚动"
            }else if(this.index===4){
              className="第"+(this.index+1)+"课：左右结构，TAB切换的效果"
            }else if(this.index===5){
              className="第"+(this.index+1)+"课：canvas画布"
            }else if(this.index===6){
              className="第"+(this.index+1)+"课：左右布局、内部布局"
            }else{
              className="第"+(this.index+1)+"课"
            }
            this.list.push({index: this.index, className:className})
            this.index++
          }
          this.loading = false
          if(this.list.length===200){
            this.finished = true
          }
        }
      }
    }
</script>

<style scoped lang="less">

</style>